<template>
  <div class="container">
    <div class="box-bd">
      <ul>
        <li>
          <div class="relative-card">
            <el-card shadow="hover" style="height:100px;" class="relative">
              <div class="padding">
                <div id="time-hour" class="text">{{nowTime.hour}}</div>
                <div class="time-temp">:</div>
                <div id="time-minutes" class="text">{{nowTime.minutes}}</div>
                <div class="time-temp">:</div>
                <div id="time-second" class="text">{{nowTime.seconds}}</div>
              </div>
              <div class="padding-bottom">
                <div id="time-year" class="text">{{nowTime.year}}</div>
                <div class="time-ltemp">-</div>
                <div id="time-month" class="text">{{nowTime.month}}</div>
                <div class="time-ltemp">-</div>
                <div id="time-day" class="text">{{nowTime.day}}</div>
              </div>
            </el-card>
          </div>
        </li>
        <li>
          <div class="relative-card">
            <div class="cardbox">
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <div class="grid-content grid-con-1">
                  <!-- <i class="el-icon-user-solid grid-con-icon"></i> -->
                  <div class="grid-cont-right">
                    <div class="grid-num">{{pileNum.length}}</div>
                    <div>充电桩数量</div>
                  </div>
                </div>
              </el-card>
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <div class="grid-content grid-con-1">
                  <!-- <i class="el-icon-user-solid grid-con-icon"></i> -->
                  <div class="grid-cont-right">
                    <div class="grid-num">{{chargingNum}}</div>
                    <div>正在充电</div>
                  </div>
                </div>
              </el-card>
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <div class="grid-content grid-con-1">
                  <!-- <i class="el-icon-user-solid grid-con-icon"></i> -->
                  <div class="grid-cont-right">
                    <div class="grid-num">{{queueWaitNum}}</div>
                    <div>队列中等待</div>
                  </div>
                </div>
              </el-card>
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <div class="grid-content grid-con-1">
                  <!-- <i class="el-icon-user-solid grid-con-icon"></i> -->
                  <div class="grid-cont-right">
                    <div class="grid-num">{{areaWaitNum}}</div>
                    <div>等候区等待</div>
                  </div>
                </div>
              </el-card>

            </div>
          </div>

        </li>
        <li>
          <ChargeTimes :reportData="reportData" v-if="reportData.allData.length"></ChargeTimes>
        </li>
        <li>
          <WorkHours :reportData="reportData" v-if="reportData.allData.length"></WorkHours>
        </li>
        <li>
          <ChargeHours :reportData="reportData" v-if="reportData.allData.length"></ChargeHours>
        </li>
        <li>
          <ChargeQuantity :reportData="reportData" v-if="reportData.allData.length"></ChargeQuantity>
        </li>
        <li>
          <ChargeBill :reportData="reportData" v-if="reportData.allData.length"></ChargeBill>
        </li>
        <li>
          <ServiceBill :reportData="reportData" v-if="reportData.allData.length"></ServiceBill>
        </li>
        <li>
          <TotalBill :reportData="reportData" v-if="reportData.allData.length"></TotalBill>
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
import ChargeTimes from "./report/ChargeTimes.vue";
import WorkHours from "./report/WorkHours.vue";
import ChargeHours from "./report/ChargeHours.vue";
import ChargeQuantity from "./report/ChargeQuantity.vue";
import ChargeBill from "./report/ChargeBill.vue";
import ServiceBill from "./report/ServiceBill.vue";
import TotalBill from "./report/TotalBill.vue";
export default {
  components: {
    ChargeTimes: ChargeTimes,
    WorkHours: WorkHours,
    ChargeHours: ChargeHours,
    ChargeQuantity: ChargeQuantity,
    ChargeBill: ChargeBill,
    ServiceBill: ServiceBill,
    TotalBill: TotalBill,
  },
  data() {
    return {
      reportData: {
        allData: [],
        totalPage: 0,
      },
      recordDate: "",
      nowTime: {
        year: "",
        month: "",
        day: "",
        hour: "",
        minutes: "",
        seconds: "",
      },

      pileNum: [],
      chargingNum: 0,
      queueWaitNum: 0,
      areaWaitNum: 0,
    };
  },
  created() {
    this.nowTimes();
  },
  mounted() {
    this.getData();
  },
  methods: {
    nowTimes() {
      var time = new Date();

      this.nowTime.year = time.getFullYear();
      this.nowTime.month =
        time.getMonth() + 1 < 10
          ? "0" + (time.getMonth() + 1)
          : time.getMonth() + 1;
      this.nowTime.day =
        time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
      this.nowTime.hour =
        time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
      this.nowTime.minutes =
        time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
      this.nowTime.seconds =
        time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();

      setInterval(this.nowTimes, 1000);
      this.clear();
    },
    clear() {
      clearInterval(this.nowTimes);
      this.nowTimes = null;
    },
    async getData() {
      const res = await this.$axios.get("/report/admin/realTime");
      this.reportData.allData = res;
      //对数据排序
      this.reportData.allData.sort((a, b) => {
        return a.chargePower - b.chargePower;
      });
      //每5个数据显示一页
      this.reportData.totalPage = Math.ceil(this.reportData.allData.length / 5);
      let arr = this.reportData.allData[0].recordDate.split("-");
      this.recordDate = `${arr[0]} 年 ${arr[1]} 月 ${arr[2]} 日`;
      //计算充电桩数量
      var array = [];
      this.reportData.allData.forEach((element) => {
        array.push(element.pileId);
      });
      this.pileNum = [...new Set(array)];
      //计算正在充电的数量
      const queueArr = await this.$axios.get("/queue/admin/waitMonitor");
      queueArr.forEach((element) => {
        return element.charge && this.chargingNum++;
      });
      //计算队列中等待的数量
      queueArr.forEach((element) => {
        return (this.queueWaitNum += element.waitLength);
      });
      //计算等候区等待的数量
      const area = await this.$axios.get("/report/area");
      this.areaWaitNum = area.fastSize + area.slowSize;
    },
    changeDate(val) {
      this.recordDate = val;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  min-height: 469px;
  padding: 20px;
  .box-bd {
    width: 100%;
    .relative-card {
      background: #040d21;
      position: relative;
      border-radius: 10px !important;
      overflow: hidden;
      width: 360px;
      height: 240px;
      .cardbox {
        width: 100%;
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        // margin: 0 15px 0 0;
        top: 50%;
        transform: translateY(-50%);
        // flex-grow: 3;
        .el-card {
          // flex-grow: 0;
          width: 35%;
          background-color: #000;
          border: none;
        }
      }
    }

    ul {
      width: 100%;
      // padding: 0 10px;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      flex-grow: 3;
      li {
        float: left;
        width: 31% !important;
        height: 240px;
        list-style: none;
        margin: 10px 0;
        // margin-bottom: 15px;
        overflow: hidden;
      }
    }
  }
}

.relative {
  background: #040d21;
  margin: 0 15px 0 0;
  top: 50%;
  transform: translateY(-50%);
  // border-radius: 15px;
  border: none;
  position: relative;
  display: block;
  div {
    display: flex;
  }
  .padding {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 60px;
    box-sizing: border-box;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
    font-weight: 800;

    .time-temp {
      margin: 0 20px;
      transform: translateY(-3px);
    }
  }
  .padding-bottom {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 25px;
    box-sizing: border-box;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
    font-weight: 500;
    .time-ltemp {
      margin: 0 10px;
      transform: translateY(-2px);
    }
  }
  .text {
    background: linear-gradient(-210deg, #a2facf 0%, #64acff 100%);
    // background-color: rgb(45, 140, 240);
    color: transparent;
    -webkit-background-clip: text;
    letter-spacing: -0.03em;
    display: block;
    align-items: center;
  }
}

// .el-row-block {
//   position: relative;
//   margin-bottom: 40px;
//   .block {
//     position: absolute;
//     right: 10px;
//     :after {
//       content: "";
//       display: block;
//       clear: both;
//     }
//   }
// }

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
  background-color: #040d21;
}

.grid-cont-right {
  flex: 2;
  text-align: center;
  font-size: 14px;
  color: #fff;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}
</style>
